<template>
  <div>
    <p>{{ count }}</p>
    <button v-on:click = "count++">+1</button>
    <button v-on:click = "increase"> + 1</button>
    <button v-on:click = "add(3)"> + 3</button>
    <button v-on:click = "add(5)"> + 5</button>
  </div>
</template>

<script setup>
  import {ref} from "vue"
    // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力
    // 3.分类
      // 3.事件绑定指令: 用于标签进行事件绑定,处理用户交互（简写： @ + 事件名 = ""）
      // 1.v-on:"事件" = "内联/行内代码"-直接写在一行里面
  let count = ref(0)
      // 2.v-on:"事件" = "函数"-单独使用函数实现，传函数名
  let increase = () => {count.value++}
      // 3.v-on:"事件" = "带参函数"-单独使用函数实现，传函数名及参数
  let add = (n) => {count.value += n}
      // 4.条件渲染指令: 根据表达式的结果为true/false决定是否展示
      // 5.列表渲染指令: 基于数组循环生成一套列表
      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)
</script>

<style scoped>

</style>